<template>
    <div class="container">
        <el-form ref="form" :model="form" label-width="80px" size="mini">
            <el-row :gutter="20">
                <el-col :span="19">
                    <el-form-item label="任务名称">
                        <el-input v-model="form.rwmc"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-button type="primary" size="mini">指标配置项</el-button>
                        <el-button type="primary" size="mini">任务配置项</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="任务描述">
                        <el-input type="textarea" v-model="form.rwms" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="创建时间">
                        <el-input v-model="form.cjsj"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="form.cjr"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="title">
                        执行记录
                    </div>
                    <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 400" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" @onSelectionChange="onSelectionChange" />

                </el-col>
            </el-row>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    props: {
        rowData: {
            type: Object,
            default: false
        }
    },
    data() {
        return {

            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            queryObj: {
                zbmc: '', //指标名称
                rwmc: '',//指标类型
                pageNo: 1,
                pageSize: 20
            },
            loading: false,

            //右侧表格开始
            tableColumns: [
                {
                    label: '开始时间',
                    prop: 'zxkssj',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '结束时间',
                    prop: 'zxjssj',
                    align: 'center',
                    minWidth: 120,
                },




                {
                    label: '执行记录',
                    prop: 'zxjl',
                    align: 'center',
                    minWidth: 80,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.state == '失败') {
                            return (
                                <span class="undertxtRed">
                                    {params.row.zxjl}
                                </span>
                            );
                        } else {
                            return (<span>
                                {params.row.zxjl}
                            </span>
                            )
                        }

                    }
                },





            ],
            tableDatas: [
                {
                    rwmc: '市局指标',
                    zbmc: '无票销售累计为负',
                    state: '成功',
                    cjsj: '2024-10-19',
                    cjr: '张树文',
                    zxjl: 78,
                    zxkssj: '2024-10-19 10:00:00',
                    zxjssj: '2024-10-19 11:00:00',
                    ywsm: '风险分析期内，增值税一般纳税人累计无...'
                },
                {
                    rwmc: '市局指标',
                    zbmc: '存在存货损失未转出进项税额',
                    state: '失败',
                    cjsj: '2024-09-21',
                    cjr: '王杰',
                    zxjl: 78,
                    zxkssj: '2024-10-19 10:00:00',
                    zxjssj: '2024-10-19 11:00:00',
                    ywsm: '企业所得税申报表附表A105090中申报存...'
                },
                {
                    rwmc: '2024邯郸局指标',
                    zbmc: '少缴仓储保管合同印花税',
                    state: '成功',
                    cjsj: '2024-08-07',
                    cjr: '佟丽丽',
                    zxjl: 78,
                    zxkssj: '2024-10-19 10:00:00',
                    zxjssj: '2024-10-19 11:00:00',
                    ywsm: '开具或取得相应商品编码增值税发票金额......'
                },
                {
                    rwmc: '2024邯郸局指标',
                    zbmc: '少缴财产租赁合同印花税',
                    state: '无效',
                    cjsj: '2022-12-06',
                    cjr: '佟丽丽',
                    zxjl: 78,
                    zxkssj: '2024-10-19 10:00:00',
                    zxjssj: '2024-10-19 11:00:00',
                    ywsm: '开具或取得相应商品编码增值税发票金额......'
                }
            ],
            total: 0,
            selectedRows: [],
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        getTableData() { },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }
    .title {
        height: 32px;
        color: #fff;
        background-color: rgb(127, 127, 127);
        line-height: 32px;
        padding-left: 10px;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .undertxtRed {
        color: rgb(217, 0, 27);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>